<div class="container-fluid layout outwarp-container">
  <div class="nav-tabs" style="display:none">
    <span class="tab" [ngClass]="{'tabActive': tabs === 1}" (click)="changeTab(1)">商品分类管理</span>
    <span class="tab" [ngClass]="{'tabActive': tabs === 2}" (click)="changeTab(2)">商品上下架</span>
    <span class="tab" [ngClass]="{'tabActive': tabs === 3}" (click)="changeTab(3)">商品橱窗管理</span>
    <span class="tab" [ngClass]="{'tabActive': tabs === 4}" (click)="changeTab(4)">普通拼团</span>
    <span class="tab" [ngClass]="{'tabActive': tabs === 5}" (click)="changeTab(5)">拉新拼团</span>
    <span class="tab" [ngClass]="{'tabActive': tabs === 6}" (click)="changeTab(6)">一分抽奖拼团</span>
  </div>

  <!-- 商品分组管理 start -->
  <div class="layout-container" *ngIf="tabs === 1">

    <div class="layout-left">
      <div class="prompt-info">
        <i class="iconfont icon-tishi"></i>合理设置商品分类能方便将商品填写到货架，并进行及时的管理
      </div>
      <div class="show-group">
        <span class="show-title">分类名称</span>
        <span class="show-content">{{groupName}}</span>
        <a href="javascript:;" *ngIf="groupID !== 0" (click)="editGroupDialog()">编辑</a>
        <a href="javascript:;" *ngIf="groupID !== 0" (click)="deleteModal.show()">删除</a>
        <span class="red" *ngIf="!groupRecommend&&groupID !== 0" (click)="pushHome(1)">推荐到首页</span>
        <span class="red" *ngIf="groupRecommend&&groupID !== 0" (click)="pushHome(0)">取消首页推荐</span>
      </div>
      <div class="show-group">
        <span class="show-title">排序方式</span>
        <span class="show-content">
        <select name="order" class="form-control" [(ngModel)]="order" (change)="changeOrder()">
          <option value="none">请选择排序方式</option>
          <option value='{"sales_total": "desc"}'>按商品销量</option>
          <option value='{"price": "desc"}'>按商品价格</option>
          <option value='{"created_at": "desc"}'>商品创建时间</option>
        </select>
      </span>
      </div>
      <div class="btn-line">
        <button class="btn btn-default pull-right" *ngIf="groupID !== 0" (click)="addGoodsInGroup()"><i class="iconfont icon-jia1"></i>添加商品到该类</button>
      </div>
      <div class="loading" [hidden]="!loadingShow">
        <app-loading></app-loading>
      </div>
      <table class="table" *ngIf="!loadingShow">
        <thead>
          <tr>
            <th>
              ID
              <!--<input type="checkbox" [(ngModel)]="isCheckedAll" [checked]="isCheckedAll" (click)="checkedAll()">-->
            </th>
            <th>商品</th>
            <th>价格</th>
            <th>总销量</th>
            <th>商品状态</th>
            <th>所属分类</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr class="text-center" *ngIf="!goodsList.length"><td colspan="8">暂无商品</td></tr>
          <tr *ngFor="let item of goodsList">
            <td>
              {{item.id}}
              <!--<input type="checkbox" [(ngModel)]="item.selected" [checked]="item.selected" (click)="selectedGoods(item)">-->
            </td>
            <td>
              <img src="{{item.first_picture?aliyunOssOutputUrl+'/'+item.first_picture:''}}" alt="">
              <span class="goods-name"><span class="goods-name-omit" title="{{item.name}}">{{item.name}}</span></span>
            </td>
            <td>￥ {{item.price/1000}}</td>
            <td>{{item.sales_total}}</td>
            <td>{{item.status}}</td>
            <td><span class="mr-5" *ngFor="let item2 of item.goods_category">{{item2.name}}</span></td>
            <td>
              <a href="javascript:;" routerLink="/main/store-product/goods-manage/edit/{{item.id}}">编辑</a>
              <a href="javascript:;" (click)="editGoodsGroup(item)">分类</a>
              <a href="javascript:;" *ngIf="groupID !== 0" (click)="goodsUnbind(item.id)">移除</a>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="text-center">
        <pagination (pageChanged)="allGoodsPageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [(ngModel)]="currentPage" [maxSize]="5"
                    previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
      </div>
    </div>

    <div class="layout-right">
      <div class="group" [ngClass]="{'active': groupID === 0}" (click)="chooseGroup(0,'全部商品')">全部商品({{allGoodsNum}})</div>
      <div class="group" [ngClass]="{'active': groupID === item.id}" *ngFor="let item of groupList" (click)="chooseGroup(item.id,item.name,item.recommend)">{{item.name}}({{item.goodsNum}})<span class="red-circle" *ngIf="!!item.recommend"></span></div>
      <div class="group" (click)="addGroup()"><i class="iconfont icon-jia1"></i>新建分类</div>
    </div>
  </div>
  <!-- 商品分组管理 end -->

  <!-- 商品上下架 start -->
  <div class="layout-container" *ngIf="tabs === 2">
    <app-goods-status></app-goods-status>
  </div>
  <!-- 商品上下架 end -->

  <!-- 商品橱窗管理 start -->
  <div class="layout-container" *ngIf="tabs === 3">
    <app-show-case></app-show-case>
  </div>
  <!-- 商品橱窗管理 end -->

  <!-- 普通拼团 start -->
  <div class="layout-container" *ngIf="tabs === 4">
    <app-ordinary-spell></app-ordinary-spell>
  </div>
  <!-- 普通拼团 end -->

  <!-- 拉新拼团 start -->
  <div class="layout-container" *ngIf="tabs === 5">
    <app-new-spell></app-new-spell>
  </div>
  <!-- 拉新拼团 end -->

  <!-- 一分抽奖拼团 start -->
  <div class="layout-container" *ngIf="tabs === 6">
    <app-lottery-spell></app-lottery-spell>
  </div>

  <!-- 一分抽奖拼团 end -->

</div>

<!-- 是否确认删除 -->
<div class="modal fade" bsModal #deleteModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">确认</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="deleteModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        <p>确定删除吗？</p>
      </div>
      <div class="text-right mb20">
        <button class="btn btn-default btn-md-long" type="button" (click)="deleteModal.hide()">取消</button>
        <button class="btn btn-success btn-md-long" type="button" (click)="delGroupSubmit()">确定</button>
      </div>
    </div>
  </div>
</div>

<!-- 新建分组 -->
<div bsModal #addGroupModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新建分类</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addGroupModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #addGroupForm="ngForm">
          <div class="form-group clearfix">
            <label class="col-md-3"><span class="c-red">*</span>分类名称</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="name" #name="ngModel" [(ngModel)]="groupData.name" required>
              <p [hidden]="name.pristine || name.valid" class="alert alert-danger">名称不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3">序号</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="sort" [(ngModel)]="groupData.sort">
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3">备注</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="sort" [(ngModel)]="groupData.remark">
            </div>
          </div>
        </form>
      </div>
      <div class="model-footer">
        <button type="submit" class="btn btn-default" (click)="addGroupModal.hide();">取 消</button>
        <button type="button" class="btn btn-success" [disabled]="!addGroupForm.form.valid" (click)="addGroupSubmit()">确 定</button>
      </div>
    </div>
  </div>
</div>

<!-- 编辑分组弹框 -->
<div class="modal fade" bsModal #goodsGroupModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">选择分类</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="goodsGroupModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="city-pick-container">
          <div class="city-box">
            <div class="city-title">分类名称</div>
            <div class="city-list">
              <div class="city-item">
                <a href="javascript:;" class="province" *ngFor="let item of groupList"
                   [ngClass]="{'active': item === checkedGroup}"
                   (click)="checkedGroup = item">{{item.name}}</a>
              </div>
            </div>
          </div>
          <div class="btn-box">
            <button class="btn btn-default btn-md-long" type="button" (click)="addSelf()">添加</button>
          </div>
          <div class="city-box">
            <div class="city-list">
              <ul class="al-pick-list">
                <li *ngFor="let item of selfAdd;let i=index">{{item.name}}<span class="iconfont icon-cuowu" (click)="selfAdd.splice(i,1)"></span></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="text-center mt20">
          <button class="btn btn-default btn-md-long" type="button" (click)="goodsGroupModal.hide()">关闭</button>
          <button class="btn btn-default btn-md-long" type="button" (click)="addGoodInGroups()">确定</button>
        </div>

      </div>
    </div>
  </div>
</div>

<!-- 添加商品 -->
<div bsModal #addGoodsModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">添加商品</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addGoodsModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="search-line">
          <input type="text" class="form-control" placeholder="按商品名称搜索" name="keyWordDlg" [(ngModel)]="keyWordDlg">
          <select class="form-control" name="groupDlg" [(ngModel)]="groupIdDlg">
            <option value="0">全部商品</option>
            <option *ngFor="let item of groupList" value="{{item.id}}">{{item.name}}</option>
          </select>
          <select class="form-control" *ngIf="tabs === 1" name="statusDlg" [(ngModel)]="statusDlg">
            <option value="选择商品状态">选择商品状态</option>
            <option value="上架">上架</option>
            <option value="下架">下架</option>
          </select>
          <div class="pull-right">
            <button class="btn btn-default" (click)="searchDlg()">搜索</button>
            <button class="btn" (click)="resetDlg()">重置</button>
          </div>
        </div>
        <div class="table-title">
          <span class="col-md-1"></span>
          <span class="col-md-2">商品分类</span>
          <span class="col-md-2">商品图片</span>
          <span class="col-md-2">商品名称</span>
          <span class="col-md-2">库存量</span>
          <span class="col-md-3">创建时间</span>
        </div>
        <div class="table-items" *ngFor="let item of goodsListDlg">
          <span class="col-md-1"><input type="checkbox" [(ngModel)]="item.selected" [checked]="item.selected" (click)="selectedGoods(item)"></span>
          <span class="col-md-2 omit"><span class="mr-5" *ngFor="let item2 of item.goods_category">{{item2.name}}</span></span>
          <span class="col-md-2"><img src="{{item.first_picture?aliyunOssOutputUrl+'/'+item.first_picture:''}}" alt=""></span>
          <span class="col-md-2" title="{{item.name}}">{{item.name}}</span>
          <span class="col-md-2">{{item.in_stock}}</span>
          <span class="col-md-3">{{item.created_at}}</span>
        </div>
      </div>
      <div class="model-footer">
        <div class="col-md-8">
          <pagination (pageChanged)="dlgPageChanged($event)" [totalItems]="totalItemsDlg" [itemsPerPage]="itemsPerPageDlg" [(ngModel)]="currentPageDlg"  [maxSize]="5"
                      previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
        </div>
        <div class="pull-right">
          <button type="submit" class="btn btn-default" (click)="addGoodsInSubmit()">确定</button>
          <button type="submit" class="btn btn-default" (click)="addGoodsModal.hide();checkedGoods = [];currentPageDlg=1;">取消</button>
        </div>
      </div>
    </div>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="isShow = $event;"></app-notification>
